<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link href="./plugins/bootstrap.min.css" rel="stylesheet">
    <link href="./plugins/bootstrap-theme.min.css" rel="stylesheet">
    <link href="./plugins/font-awesome.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700,700i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Crimson+Text:400,700,700i|Josefin+Sans:700" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.1.0/styles/base16/horizon-light.min.css"
        rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.0/swiper-bundle.min.css" rel="stylesheet">
    <link rel="icon" href="./images/logo.png">
    <link rel="stylesheet" href="./styles/main.css">
</head>

<body>
    <div id="app" v-cloak>
        <div class="btn-lang-container">
            <div v-for="(item,index) in currentLangArr" :key="item.value + index" @click="changeLang(item.value)"
                class="btn ew-btn">{{ item.label }}</div>
        </div>
        <div id="index">
            <div class="container main">
                <div class="row home">
                    <div id="index_left" class="col-md-6 left">
                        <img class="img-responsive ew-img" src="./images/home.jpg">
                    </div>
                    <div id="index_right" class="col-md-6 text-center right">
                        <div class="logo">
                            <img src="./images/logo.png">
                            <h4>{{ indexData[currentLang]["who"] }}</h4>
                        </div>
                        <p class="home-description">{{ indexData[currentLang]["description"] }}</p>
                        <div class="btn-group-vertical custom_btn animated slideinright">
                            <div class="btn ew-btn" v-for="(text,index) in indexData[currentLang]['btn']"
                                :key="text.id + index" :id="text.id" @click="toLocate(text.id)">{{ text.content }}</div>
                        </div>
                        <div class="social">
                            <a target="_blank" rel="noopener noreferrer" v-for="(url,index) in iconURLList"
                                :key="url.href + index" :href="url.href">
                                <i aria-hidden="true" :class="url.iconName"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="about_scroll" class="pages">
            <div class="container main">
                <div class="row">
                    <div class="col-md-6 left" id="about_left">
                        <img class="img-responsive ew-img" src="./images/about.jpg">
                    </div>
                    <div class="col-md-6 right" id="about_right">
                        <a href="/" class="btn ew-btn back"> <i class="fa fa-angle-left" aria-hidden="true"></i>{{
                            aboutData[currentLang]["backBtnText"] }}</a>
                        <div class="watermark">
                            <h2 class="page-title" text-center>{{ aboutData[currentLang]["title"] }}</h2>
                            <div class="marker">a</div>
                        </div>
                        <p class="subtitle">{{ aboutData[currentLang]["description"] }}</p>
                        <p class="info">"{{ aboutData[currentLang]["content"] }}"</p>
                    </div>
                </div>
            </div>
        </div>
        <div id="work_scroll" class="pages">
            <div class="container main">
                <div class="row">
                    <div class="col-md-6" id="work_left">
                        <div class="swiper-container" ref="slideContainer">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="slide-inner" style="background-image:url(./images/work.jpg)">
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="slide-inner" style="background-image:url(./images/home.jpg)">
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="slide-inner" style="background-image:url(./images/contact.jpg)">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6" id="work_right">
                        <a href="/" class="btn ew-btn back"> <i class="fa fa-angle-left" aria-hidden="true"></i>
                            {{ workData[currentLang]["backBtnText"] }}</a>
                        <div class="watermark">
                            <h2 class="page-title" text-center>{{ workData[currentLang]["title"] }}</h2>
                            <div class="marker">w</div>
                        </div>
                        <p class="subtitle">{{ workData[currentLang]["description"] }}</p>
                        <div class="info" v-html="renderMarkdown(workData[currentLang]['content'])"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="contact_scroll" class="pages">
            <div class="container main">
                <div class="row">
                    <div class="col-md-6 left" id="contact_left">
                        <img class="img-responsive ew-img" src="./images/contact.jpg">
                    </div>
                    <div class="col-md-6 right" id="contact_right">
                        <a href="/" class="btn ew-btn back"> <i class="fa fa-angle-left" aria-hidden="true"></i>
                            {{ contactData[currentLang]["backBtnText"] }} </a>
                        <div class="watermark">
                            <h2 class="page-title" text-center>{{ contactData[currentLang]["title"] }}</h2>
                            <div class="marker">c</div>
                        </div>
                        <p class="subtitle">{{ contactData[currentLang]["description"] }}</p>
                        <form class="form_edit">
                            <div class="form-group">
                                <input type="name" class="form-control" :placeholder="contactData[currentLang]['name']">
                            </div>
                            <div class="form-group">
                                <input type="email" class="form-control"
                                    :placeholder="contactData[currentLang]['email']">
                            </div>
                            <div class="form-group">
                                <textarea class="form-control" rows="5"
                                    :placeholder="contactData[currentLang]['message']"></textarea>
                            </div>
                            <button type="submit" class="btn ew-btn submit">{{
                                contactData[currentLang]["sendBtnText"]}}</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <footer class="text-center">
            <div class="container bottom">
                <div class="row">
                    <div class="col-sm-12">
                        <p>{{ footerData[currentLang] }}</p>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.0.0-alpha1/highlight.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.0/swiper-bundle.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/marked/2.0.3/marked.min.js"></script>
<script src="https://www.eveningwater.com/static/plugin/log-util.js"></script>
<script src="./plugins/jquery-3.1.0.min.js"></script>
<script src="./plugins/bootstrap.min.js"></script>
<script src="./script/data.js"></script>
<script src="./script/script.js"></script>
<script>
    consoleUtil("./images/dragon.png", '*');
</script>

</html>